<template>
	<view class="sele">
		<navigator url="../user/Addres/Addres" > 
			<view v-if="selShow">
				选择收货地址
			</view>
			<view v-else >
				<view> 姓名{{selList.name}}</view>
				<view> 电话{{selList.phoneNumber}}</view>
				<view>地址{{selList.province}}{{selList.region}}</view>
			</view>
			
		</navigator>
		<!-- 订单详情 -->
		<view class="orderList">
		
		      <view class="top">
					<text>订单编号: {{orderBase.orderSn}}</text>
					<text>等待支付</text>
				</view>
			<view class="orList" v-for="item in orderItem" :key="item.id">
		
				<view class="center">
					<image class="img" :src="item.productPic" mode=""></image>
					<view class="right">
						<view class="">
							<text>{{item.productName}}</text>
							<text>￥{{item.productPrice}}元</text>
						</view>
						<view class="">
							<text>编号: {{item.orderId}}</text>
							<text>x {{item.productQuantity}}</text>
						</view>
						<view class="">
							<text v-for="item in JSON.parse(item.productAttr) ">
								规格: {{item.key}} : {{item.value}}
							</text>
						</view>
					</view>
				</view>
			</view>
			<view class="bottom">
				<view class="">
					合计:{{allPrice}}
				</view>
				<view class="" @tap='payment(orderBase.id)'>
					确定付款
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import { getPreOrderById } from "@/api/selectAddress/index.js"

	export default {
		data() {
			return {
				id:"",
				selList:{},
				selShow:true,
				orderItem:[],
				orderBase:"",
			};
		},
		onShow() {
		// var seladrList = this.$store.state.address   //获取到共享里面的数据
		var seladrListt = uni.getStorageSync("selList")  //获取本地数据
		if(seladrListt){
			this.selList = seladrListt
			this.selShow = false
			}else{
				return
			}
		// }else if(seladrList) {
		// 	this.selList = seladrList
		// 	this.selShow = false
			
		// } else {
		// 		return
		// 	}
		// if (seladrList) {
		// 	this.selList = seladrList
		// 	this.selShow = false
		// } else {
		// 	return
		// }
		console.log(seladrListt);
		},
		onLoad(id) {
			 this.id = id.id;
			console.log(id);
			// 获取点击立即购买时候的订单
			getPreOrderById(this.id)
			.then(res=>{
				this.orderItem = res.data.orderItems
				this.orderBase = res.data.orderBase
				console.log(res);
			})
			
		},
		
		methods:{
			//付款页面
			payment(val) {
				console.log(val)
				uni.navigateTo({
					url:`./payment/payment?id=${this.id}`
				})
			}
			
		},
		computed:{
				allPrice(){
					return this.orderItem.reduce((total,current)=>{
						  return total + current.productQuantity * current.productPrice
					},0)
				}
		}
	}
</script>

<style lang="scss" scoped>
.sele{
	margin-left: 40rpx;
	margin-right: 40rpx;
	
		.orderList {
			background-color: #fff;
			margin-top: 40rpx;
			border-radius: 14rpx;
			box-shadow: 0 0 20rpx 0 #d3d3d3;
			padding: 30rpx;
		
			.top {
				display: flex;
				font-size: 24rpx;
				justify-content: space-between;
				padding: 0px 0px 30rpx 0rpx;
				border-bottom: 2rpx solid #d3d3d3;
		
				text:nth-child(1) {
					color: #3e3e3e;
				}
		
				text:nth-child(2) {
					color: #034c46;
				}
			}
		
			.center {
				padding: 30rpx 0;
				display: flex;
				margin-top: 20rpx;
				color: #3e3e3e;
				font-size: 26rpx;
				border-bottom: 1px solid #d3d3d3;
		
				.img {
					width: 162rpx;
					height: 162rpx;
				}
		
				.right {
					width: 100%;
					height: auto;
					margin-left: 15rpx;
					display: flex;
					align-items: baseline;
					flex-direction: column;
					justify-content: space-evenly;
		
					// padding: 0 20rpx;
					view:nth-child(1) {
						display: flex;
		
						text:nth-child(1) {
							width: 250rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
		
						text:nth-child(2) {
							margin-left: 52rpx;
							// float: right;
						}
					}
		
					view:nth-child(2) {
						margin-top: 40rpx;
						font-size: 22rpx;
						color: #8d8d8d;
		
						text:nth-child(2) {
							margin-left: 70rpx;
						}
					}
		
					view:nth-child(3) {
						font-size: 22rpx;
						color: #8d8d8d;
		
					}
				}
			}
		
			.bottom {
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				padding: 20rpx 0 0px 0px;
		
				view:nth-child(1) {
					font-size: 13px;
					line-height: 18px;
					color: #3e3e3e;
					padding: 20rpx 0;
				}
		
				view:nth-child(2) {
					width: 124rpx;
					height: 50rpx;
					border: 2rpx solid #2d4f43;
					font-size: 26rpx;
					border-radius: 10rpx;
					color: #2d4f43;
					text-align: center;
					line-height: 50rpx;
					margin-left: 32rpx;
				}
			}
		
		}
	
	
}
	

</style>
